/* eslint-disable vue/no-unused-components */
<!-- 发现页 -->
<template>
  <div class="discover">


    <div class="background"></div>
    <div class="discover-container" >
      <div class="discover-left" >
        <div class="discover-left-title">
          <p class="discover-left-title-inner">近期热门社区</p>
        </div>
        <subcommunity :cardData="communities"></subcommunity>
      </div>
      <div class="discover-right">
        <div class="operations">
          <p>近期热门文章</p>
          <!-- <button>
                        <collectionbutton></collectionbutton>
                        <span>加入</span>
                    </button> -->
        </div>
        <topics  :topicData="posts" :operationBarVis="true"></topics>
      </div>
    </div>
  </div>
</template>

<script>
import Topics from "../components/common/topics.vue";
import Subcommunity from "../components/homecomponents/subcommunity.vue";
import { mapGetters } from "vuex";
import { handleTopics } from "../utils/utils";
// import Collectionbutton from '../components/common/collectionbutton.vue';

export default {
  data() {
    return {
      posts: [],
      like: [],
      communities: [],
      currentCommu: 0,
    };
  },

  components: { Subcommunity, Topics },

  computed: {
    ...mapGetters(["user"]),
  },

  created() {
    this.intializePage();
  },

  methods: {
    intializePage() {
      const that = this;
      if (this.currentCommu == 0) {
        this.$getApi
          .getMixedHotPosts(this.user)
          .then((res) => {
            that.posts = res.data.posts;
            that.posts = handleTopics(
              res.data.posts,
              res.data.like,
              res.data.collection
            );
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.$getApi.getHotCommunities().then((res) => {
        console.log("currentHotCommunities:", res.data);
        that.communities = res.data.items;
      });
    },
  },
};
</script>
<style>
/* .discover{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
} */
.discover > .background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(242, 245, 247);
  z-index: -20;
}
.discover-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-width: 1225px;
  margin: 5rem auto;
  padding: 0 16px;
  height: 85%;
  justify-content: center;
  z-index: 10;
}
.discover-left {
    position: sticky;
  top: calc(5rem + 2px);
  min-width: 298px;
  height: 100%;
  overflow: scroll;
}
.discover-left-title {
  height: 50px;
  padding: 0 10px;
  position: sticky;
  top: 0;
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.925);
  display: flex;
  align-items: center;
}
.discover-left-title-inner {
  border-left: 5px rgb(80, 80, 255) solid;
  padding: 0 10px;
  color: rgb(68, 68, 68);
  height: 20px;
  font-size: 16px;
  font-weight: 600;
}
.discover-right {
  position: relative;
  min-width: 695px;
  height: 100%;
  margin-left: 20px;
  overflow: scroll;
}
.discover-right > .operations {
  min-width: 654px;
  height: 50px;
  background-color: rgb(255, 255, 255);
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-content: center;
  padding: 0 10px;
}
.discover-right > .operations > p {
  border-left: 5px rgb(80, 80, 255) solid;
  padding: 0 10px;
  color: rgb(68, 68, 68);
  height: 20px;
  font-size: 16px;
  font-weight: 600;
}
.discover-right > .operations > button {
  border: none;
  outline: none;
  background-color: transparent;
  position: absolute;
  right: 10px;
  height: 100%;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.discover-right > .operations > button > span {
  height: 100%;
  font-size: 12px;
  margin-left: -12px;
  line-height: 50px;
}
</style>
